const app = getApp()

Page({
  data: { 
    width:0,
    height:0,
    background:"linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",
    background_1:"linear-gradient(to right, #fff,#ff7d00)",
    background_2:"linear-gradient(to right, #fff,#0090ff)",
    canBackground:["#ff7d00","#0090ff"],
    juli:29.518732244318183,
    juli1:206.11763139204544,
    offsetX_1:0,
    offsetX:145,
    offsetX1:145,
  },
  onLoad() {
    var that=this;
    that.setData({
      width:wx.getSystemInfoSync().windowWidth,
      height:wx.getSystemInfoSync().windowHeight,
    })
    // 实例化canvas轮廓画布
    var ctx=wx.createCanvasContext('canvasId');
    that.canvasShi(ctx);
  },
  // 第一个色条
  changeColor: function(e) {
    var that=this;
    const {eventName,hexColor,rgbColor,hue} = e.detail
    that.setData({
      juli:hue,
      background_1:"linear-gradient(to right, #fff,"+hexColor+")",
    })
    var ctx=wx.createCanvasContext('canvasId');
    that.canvasShi(ctx);
    // 父组件调用子组件方法并传值过去
    var colorId_1=this.selectComponent("#colorId_1");
    colorId_1.coloid(that.data.juli,that.data.offsetX);
  },
  // 获取子组件穿回来的rgb值
  ziColor(e){
    var that=this;
    let hexColor = e.detail
    that.data.canBackground[0]=hexColor;
    that.setData({
      canBackground:that.data.canBackground,
    })
    var ctx=wx.createCanvasContext('canvasId');
    that.canvasShi(ctx);
  },
  // 第一个单色条
  changeColor_1: function(e) {
    var that=this;
    const {eventName,hexColor,rgbColor,offsetX} = e.detail
    that.data.canBackground[0]=hexColor;
    that.setData({
      canBackground:that.data.canBackground,
      offsetX:offsetX,
    })
    var ctx=wx.createCanvasContext('canvasId');
    that.canvasShi(ctx);
  },
  // 第二个色条
  changeColor1: function(e) {
    var that=this;
    const {eventName,hexColor,rgbColor,hue} = e.detail
    that.setData({
      juli1:hue,
      background_2:"linear-gradient(to right, #fff,"+hexColor+")",
    })
    var ctx=wx.createCanvasContext('canvasId');
    that.canvasShi(ctx);
     // 父组件调用子组件方法并传值过去
     var colorId_1=this.selectComponent("#colorId_2");
     colorId_1.coloid(that.data.juli1,that.data.offsetX1);
  },
   // 获取子组件穿回来的rgb值
   ziColor1(e){
    var that=this;
    let hexColor = e.detail
    that.data.canBackground[1]=hexColor;
    that.setData({
      canBackground:that.data.canBackground,
    })
    var ctx=wx.createCanvasContext('canvasId');
    that.canvasShi(ctx);
  },
  // 第二个单色条
  changeColor_2: function(e) {
    var that=this;
    const {eventName,hexColor,rgbColor,offsetX} = e.detail
    that.data.canBackground[1]=hexColor;
    that.setData({
      canBackground:that.data.canBackground,
      offsetX1:offsetX,
    })
    var ctx=wx.createCanvasContext('canvasId');
    that.canvasShi(ctx);
  },

  // canvas杯底轮廓
  canvasShi(ctx){
    var that=this;
    ctx.clearRect(0, 0, that.data.width*0.8,that.data.width*0.2)//清空画布
    // 渐变
    var gradient=ctx.createLinearGradient(0,0,that.data.width*0.8,0);
    gradient.addColorStop(0,that.data.canBackground[0]);
    gradient.addColorStop(1,that.data.canBackground[1]);
    // 开始绘制轮廓
    ctx.beginPath();
    // 左边线
    ctx.moveTo(0, 0);
    ctx.lineTo(0, that.data.width*0.1);
    // 下左弧线
    ctx.bezierCurveTo(0, that.data.width*0.2, that.data.width*0.4, that.data.width*0.2, that.data.width*0.4, that.data.width*0.2);
    // 下右弧线
    ctx.bezierCurveTo(that.data.width*0.4, that.data.width*0.2, that.data.width*0.8, that.data.width*0.2, that.data.width*0.8, that.data.width*0.1);
    // 右边线
    ctx.lineTo(that.data.width*0.8, that.data.width*0.1);
    ctx.lineTo(that.data.width*0.8, 0);
    // 上弧线
    ctx.bezierCurveTo(that.data.width*0.8, 0, that.data.width*0.4, that.data.width*0.04, 0, 0);
    ctx.setStrokeStyle('rgba(0,0,0,0)');//轮廓颜色
    ctx.fillStyle=gradient;//设置fillStyle为当前的渐变对象，填充色
    ctx.stroke();
    ctx.fill();
    ctx.draw();
  },

  // canvas保存为图片
  saveCanvasImg(){
    wx.canvasToTempFilePath({//把当前画布指定区域的内容导出生成指定大小的图片
      canvasId: 'canvasId',
      success(res) {
        wx.authorize({//向用户发起授权请求
          scope: 'scope.writePhotosAlbum',//保存相册授权
          success:()=>{
            wx.saveImageToPhotosAlbum({//保存图片到系统相册
              filePath: res.tempFilePath,
              success:()=>{
                wx.showToast({
                  title: '图片保存成功'
                })
              }
            })
          }
        })
      }
    })
  }
})
